
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单-导航</title>
    <style type="text/css" >    
        *{    
            margin:0px;    
            padding:0px;    
        }    
        a{    
            display:block;    
        }   
        /*a:link {color: #FF0000}  未访问时的状态 */
        /*a:visited {color: #00FF00} 已访问过的状态 */
        /*a:hover {color: #FF00FF} 鼠标移动到链接上时的状态 */
        /* a:active {color: #0000FF} 鼠标按下去时的状态 */ 
        a:link,a:visited  {    
            text-decoration: none;    
            color:black;    
        }    
        .menu{    
            margin:0px auto;    
            width:600px;  
            height: 400px;
            border: 1px solid red; 
        }    
        .menu ul li{    
            position:relative;    
            float:left;    
            list-style:none;    
            padding:5px;    
            border:1px dotted;    
            font-size:20px;    
            width:138px;    
            text-align: center;    
            margin:0px;
            background:pink;    
        }    
        .menu ul li ul{    
            display:none;    
        }    
        .menu ul li:hover ul{    
            display:block;    
            position: absolute; left: 0px; top: 36px;    
        }
        .menu ul li ul li:hover{
            background-color: red;
        }
    </style> 
</head>
<body>  
    <div class="menu">    
        <ul>    
            <li><a href="#">首页</a></li>    
            <li><a href="#">新闻中心</a>    
                <ul>    
                    <li><a href="1#">新手入门</a></li>    
                    <li><a href="2#">视频教程</a></li>    
                    <li><a href="3#">常见问题</a></li>    
                </ul>    
            </li>    
            <li><a href="#">学习课程</a>    
                <ul>    
                    <li><a href="1#">新手入门</a></li>    
                    <li><a href="2#">视频教程</a></li>    
                    <li><a href="3#">常见问题</a></li>    
                </ul>    
            </li>    
            <li><a href="#">联系我们</a></li>    
        </ul>    
    </div>    
</body>
</html>

